<template>
  <div>
    <div class="btns">
      <el-button @click="reflashData">更新数据</el-button>
    </div>
    <div ref="showAgTable" v-size-ob="whenRisizeChange">
      <ag-grid-vue
        class="ag-theme-quartz"
        :style="`width: 100%; height: ${boxHeight}px;`"
        :defaultColDef="defaultColDef"
        :columnTypes="columnTypes"
        :columnDefs="columnDefs"
        :headerHeight="headerHeight"
        :rowHeight="rowHeight"
        rowSelection="single"
        :singleClickEdit="true"
        :getRowId="(params) => params.data.mySelfId"
        @grid-ready="onGridReady"
        @cell-clicked="onCellClicked"
        @cellEditingStopped="cellEditingStopped"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue";
import { nanoid } from "nanoid";

export default {
  data() {
    return {
      boxHeight: 300,
      tableData: [],
    };
  },
  components: {
    AgGridVue,
  },
  created() {
    this.headerHeight = 32;
    this.rowHeight = 32;
    //默认配置
    this.defaultColDef = {
      suppressMovable: true, //可以移动列
      sortable: true,
      //是否可以调整列大小，就是拖动改变列大小
      resizable: true,
      //开启刷选
      filter: true,
      flex: 1,
    };
    //定义列类型
    this.columnTypes = {};
    this.columnDefs = [
      { field: "make", headerName: "姓名" },
      { field: "model", headerName: "性别" },
      {
        field: "price",
        headerName: "价格",
        editable: (params) => {
          return true;
        },
      },
      {
        field: "txt",
        headerName: "文字",
      },
    ];
    this.tableData = [];
    for (let i = 0; i < 100; i++) {
      this.tableData.push({
        make: `x${i}x`,
        model: `${i}Mondeo`,
        price: Math.random() * 10,
        mySelfId: nanoid(),
        txt: `消息${i}`,
      });
    }
  },
  methods: {
    cellEditingStopped(params) {
      //刷新某行
      // 方式一：更新一行的某些字段
      //  var itemsToUpdate = [];
      // this.gridApi.forEachNode((rowNode) => {
      //   var data = rowNode.data;
      //   data.price = this.randomInt();
      //   itemsToUpdate.push(data);
      // });
      // this.gridApi.applyTransaction({ update: itemsToUpdate });
      //方式二：更新一行的所有字段
      // this.gridApi.forEachNode( (rowNode) =>{
      //   var newData = {
      //     make: rowNode.data.make,
      //     model:rowNode.data.model,
      //     price: this.randomInt(),
      //   };
      //   rowNode.setData(newData);
      // });
      //方式三：给某个字段设置
      // this.gridApi.forEachNode((rowNode)=> {
      //   rowNode.setDataValue("price", this.randomInt());
      // });
    },
    onCellClicked(params) {},
    reflashData() {},
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      this.getData();
    },
    getData() {
      this.gridApi.showLoadingOverlay();
      this.gridApi.hideOverlay();
      this.gridApi.setRowData(this.tableData);
    },
    whenRisizeChange() {
      this.$nextTick(() => {
        // this.gridApi.sizeColumnsToFit();
        this.boxHeight =
          document.documentElement.clientHeight -
          this.$refs.showAgTable.getBoundingClientRect().top -
          15;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .blue-color {
  color: blue;
}
</style>
